<!DOCTYPE html>
<html lang="zh">
<head>
    <meta charset="UTF-8">
    <title>学生信息管理系统</title>
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <style>
        * { box-sizing: border-box; margin: 0; padding: 0; }

        body {
            font-family: "Microsoft YaHei", sans-serif;
            display: flex;
            height: 100vh;
            background-color: #f5f8fa;
        }

        .sidebar {
            width: 220px;
            background-color: #4D89FF;
            color: white;
            padding: 20px;
            display: flex;
            flex-direction: column;
            box-shadow: 2px 0 6px rgba(0, 0, 0, 0.1);
        }

        .sidebar h2 {
            font-size: 20px;
            margin-bottom: 20px;
            text-align: center;
        }

        .menu-item {
            padding: 12px 16px;
            margin-bottom: 10px;
            border-radius: 6px;
            background-color: rgba(255,255,255,0.1);
            cursor: pointer;
            transition: 0.3s;
        }

        .menu-item:hover,
        .menu-item.active {
            background-color: white;
            color: #4D89FF;
            font-weight: bold;
        }

        .main-content {
            flex: 1;
            display: flex;
            flex-direction: column;
            position: relative;
        }

        .topbar {
            background-color: #4D89FF;
            color: white;
            padding: 14px 24px;
            font-size: 20px;
            font-weight: bold;
            display: flex;
            justify-content: space-between;
            align-items: center;
        }

        .topbar .right-controls {
            display: flex;
            align-items: center;
            gap: 16px;
        }

        .logout-icon {
            width: 32px;
            height: 32px;
            cursor: pointer;
            transition: transform 0.2s ease;
            border-radius: 50%;
        }


        .logout-icon:hover {
            transform: scale(1.1);
        }

        iframe {
            flex: 1;
            width: 100%;
            border: none;
        }

        .toolbar {
            position: fixed;
            right: 20px;
            top: 50%;
            transform: translateY(-50%);
            display: flex;
            flex-direction: column;
            gap: 12px;
            z-index: 1001;
        }

        .tool-btn {
            width: 42px;
            height: 42px;
            border-radius: 50%;
            background: #4D89FF;
            color: #fff;
            display: flex;
            justify-content: center;
            align-items: center;
            cursor: pointer;
            font-size: 20px;
            box-shadow: 0 4px 12px rgba(0,0,0,0.2);
        }

        .tool-btn:hover {
            background: #2C5B8D;
        }

        .dark-overlay {
            position: fixed;
            top: 0; left: 0;
            width: 100vw; height: 100vh;
            background-color: rgba(0,0,0,0.5);
            z-index: 1000;
            display: none;
        }
    </style>
</head>
<body>

<!-- 左侧菜单栏 -->
<div class="sidebar">
    <h2>学生信息系统</h2>
    <div id="menuList"></div>
</div>

<!-- 主体内容区 -->
<div class="main-content">
    <div class="topbar">
        <div></div>
        <div class="right-controls">
            <span id="roleName">身份</span>
            <img src="img/me.png" alt="退出" class="logout-icon" onclick="logout()" title="退出登录" />
        </div>
    </div>
    <iframe id="mainFrame" src="main.html"></iframe>
</div>

<!-- 功能工具栏 -->
<div class="toolbar">
    <div class="tool-btn" onclick="location.reload()" title="刷新">&#x21bb;</div>
    <div class="tool-btn" onclick="toggleFullscreen()" title="全屏">&#x26F6;</div>
    <div class="tool-btn" onclick="toggleNightMode()" title="夜间">&#x263E;</div>
    <div class="tool-btn" onclick="window.print()" title="导出">&#x2399;</div>
</div>

<!-- 夜间遮罩 -->
<div class="dark-overlay" id="darkOverlay"></div>

<script src="Js/jquery.min.3.6.0.js"></script>
<script>
    $(document).ready(function () {
        const roleId = localStorage.getItem('roleId');
        if (!roleId) {
            alert('未登录或登录信息已失效');
            window.location.href = 'login.html';
            return;
        }

        const roleNames = {
            "1": "管理员",
            "2": "教师",
            "3": "学生"
        };
        $('#roleName').text(roleNames[roleId] || "用户");

        $.ajax({
            url: `/sysMenu/byRole/${roleId}`,
            type: 'GET',
            success: function (menus) {
                let menuHtml = '';
                menus.forEach((menu, index) => {
                    menuHtml += `
                        <div class="menu-item ${index === 0 ? 'active' : ''}"
                             data-url="${menu.menuUrl}" onclick="loadPage(this)">
                            ${menu.menuName}
                        </div>`;
                });
                $('#menuList').html(menuHtml);

                if (menus.length > 0) {
                    $('#mainFrame').attr('src', menus[0].menuUrl);
                }
            },
            error: function () {
                $('#menuList').html('<p>菜单加载失败</p>');
            }
        });
    });

    function loadPage(element) {
        const url = element.getAttribute('data-url');
        $('#mainFrame').attr('src', url);
        $('.menu-item').removeClass('active');
        element.classList.add('active');
    }

    function logout() {
        localStorage.clear();
        window.location.href = 'login.html';
    }

    function toggleFullscreen() {
        const doc = window.document;
        const docEl = doc.documentElement;
        const requestFullScreen = docEl.requestFullscreen || docEl.mozRequestFullScreen || docEl.webkitRequestFullScreen || docEl.msRequestFullscreen;
        const cancelFullScreen = doc.exitFullscreen || doc.mozCancelFullScreen || doc.webkitExitFullscreen || doc.msExitFullscreen;

        if (!doc.fullscreenElement && !doc.mozFullScreenElement && !doc.webkitFullscreenElement && !doc.msFullscreenElement) {
            requestFullScreen.call(docEl);
        } else {
            cancelFullScreen.call(doc);
        }
    }

    function toggleNightMode() {
        const overlay = document.getElementById('darkOverlay');
        overlay.style.display = overlay.style.display === 'block' ? 'none' : 'block';
    }
</script>
</body>
</html>
